<template>
  <main>
    <section>
      <div class="title">
        <div
          class="left"
          :class="isLogin ? 'changecolor' : 'colorwhite'"
          @click="comChange"
        > 登录</div>
        <span>|</span>
        <div
          class="right"
          :class="isLogin ? 'colorwhite' : 'changecolor'"
          @click="comChange" > 注册 </div>
      </div>
      <div class="loginbox">
        <input placeholder="姓名:" v-model.trim="name" v-show="!isLogin" />
        <input type="text" placeholder="+86:" v-model.number="phone" />
        <input type="password" placeholder="密码" v-model.trim="password" />
        <button @click="loginBtn">{{ btnText }}</button>
      </div>
    </section>
     <a-alert message="登录成功" type="success" show-icon v-show="isAlert" style="text-align: center"/>
  </main>
</template>

<script>
import { AdminLogin, Adminregister } from "@/api/AdminLogin";
//
export default {
  props: ["btnText", "spanText", "isLogin"],
  data() {
    return {
      name: "",
      phone: "",
      password: "",
      resphone: "",
      isAlert: false,
    };
  },
  methods: {
    comChange() {
      this.$emit("changeLogin");
    },
    loginBtn() {
      if (this.isLogin) {
        // if (this.phone && this.password) {
        AdminLogin().then((res) => {
          this.resphone = res.config.data.slice(10, 21);
          sessionStorage.setItem("user", this.resphone);
          this.$store.dispatch("setUser", this.resphone);
          sessionStorage.setItem("token", res.data.result.token);
          this.isAlert = true;
          let _this = this;
          setTimeout(function () {
            _this.$router.push("/");
          }, 1000);
        });
        // }
      } else {
        if (this.phone && this.password && this.name) {
          Adminregister(this.name, this.phone, this.password).then((res) => {
            console.log(res);
            this.$router.push("/");
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
main {
  height: 600px;
  width: 100%;
  background-image: url(~@/assets/img/images/login.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 60% 80%;
  cursor: pointer;
  position: relative;
  section {
    width: 400px;
    position: absolute;
    top: 20%;
    right: 5%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #434242;
    .title {
      display: flex;
      justify-content: space-between;
      border-bottom:  1px solid #434242;
      .left,
      .right {
        height: 50px;
        line-height: 50px;
        width: 100%;
        text-align: center;
        font-size: 20px;
        font-weight: bolder;
      }
      span {
        font-size: 30px;
        height: 50px;
        line-height: 50px;
        color:#434242;
      }
    }
    .loginbox {
      cursor: pointer;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 300px;
      input {
        width: 100%;
        height: 40px;
        border: none;
        border-radius: 10px;
        background-color: #fff;
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 14px;
        color: #434242;
        &::-webkit-input-placeholder {
          color: #434242;
        }
      }
      button {
        cursor: pointer;
        width: 100%;
        border-radius: 10px;
        outline: none;
        border: none;
        background-color: $color;
        height: 40px;
        color: white;
        font-weight: bolder;
      }
      span {
        text-align: right;
      }
    }
    .changecolor {
      color: $color;
    }
    .colorwhite {
      color: #fff;
    }
  }
}
</style>